<template>
	<div class="upload-container" :class="screenHeight <= 720 ? 'minScreen' : ''" id="upload-video">
		<div slot="header" class="clearfix" v-if="UploadDialogVisible">
			<el-tabs
				v-model="activeName"
				@tab-click="handleClick"
				v-loading="loading"
				element-loading-text="拼命上传中"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-upload
					class="upload-demo"
					:class="showDetail ? 'disable' : ''"
					:action="uploadConfig.url"
					:headers="uploadConfig.headers"
					:on-preview="preview"
					:on-remove="remove"
					:on-success="uploadSuccess"
					:before-remove="beforeRemove"
					:before-upload="beforeUpload"
					multiple
					:on-progress="progress"
					:file-list="fileList"
					list-type="text"
					:show-file-list="false"
					accept="video/mp4"
					v-if="!showDetail"
				>
					<el-button size="small" type="text" v-if="!showDetail">上传</el-button>
				</el-upload>

				<el-tab-pane label="播报视频" name="broadcast" class="broadcast-video">
					<el-table v-if="activeName === 'broadcast'" :data="speakVideoData" border empty-text="暂无数据" ref="speak" highlight-current-row :height="screenHeight < 1080 ? '210px' : '500px'">
						<!-- @row-click="itemsRowClick" -->
						<el-table-column label="序号" type="index" width="50" align="center"> </el-table-column>
						<el-table-column label="视频文件" width="auto" prop="fileName" align="center"> </el-table-column>
						<el-table-column width="240" prop="description" align="center">
							<template slot="header">
								<span>字幕填充</span>
								<el-popover placement="top-start" trigger="hover" content="字幕填充AI坐席拟合方式为预录制视频+视频原声时AI坐席播报阶段访客端展示的字幕内容">
									<i class="icon-question" slot="reference"></i>
								</el-popover>
							</template>
							<template slot-scope="scope">
								<el-tooltip :disabled="!isTip(scope.row.description)" popper-class="props-tips" :content="scope.row.description" placement="right-end">
									<el-input
										:value="scope.row.description"
										@input="e => (scope.row.description = validForbid(e))"
										@blur="blurDescription(scope.row)"
										placeholder="请编辑当前视频的显示字幕"
										maxlength="150"
										:disabled="showDetail"
									></el-input>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" prop="event" width="auto">
							<template slot-scope="scope">
								<div class="btns">
									<span @click="preview(scope.row)">预览</span>
									<span @click="delVideo(scope.row)" v-if="!showDetail">删除</span>
								</div>
							</template>
						</el-table-column>
					</el-table>

					<p class="error-text" v-show="isShowRemarkText">{{ errorText }}</p>
					<div class="page-contents">
						<PageSize :pages="pages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
					</div>
				</el-tab-pane>
				<el-tab-pane label="静默视频" name="silent" class="broadcast-video">
					<el-table :data="silentVideoData" v-if="activeName === 'silent'" border empty-text="暂无数据" ref="silent" highlight-current-row :height="screenHeight < 1080 ? '210px' : '500px'">
						<el-table-column label="序号" type="index" width="50" align="center"> </el-table-column>
						<el-table-column label="视频文件" width="auto" prop="fileName" align="center"> </el-table-column>
						<el-table-column width="240" prop="description" align="center">
							<template slot="header" slot-scope="">
								<span>字幕填充</span>
								<el-popover placement="top-start" trigger="hover" content="字幕填充AI坐席拟合方式为预录制视频+视频原声时AI坐席播报阶段访客端展示的字幕内容">
									<i class="icon-question" slot="reference"></i>
								</el-popover>
							</template>
							<template slot-scope="scope">
								<el-tooltip :disabled="!isTip(scope.row.description)" popper-class="props-tips" :content="scope.row.description" placement="right-end">
									<el-input
										:value="scope.row.description"
										@input="e => (scope.row.description = validForbid(e))"
										@blur="blurDescription(scope.row)"
										placeholder="请编辑当前视频的显示字幕"
										maxlength="150"
										:disabled="showDetail"
									></el-input>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" prop="event" width="auto">
							<template slot-scope="scope">
								<div class="btns">
									<span @click="preview(scope.row)">预览</span>
									<span @click="delVideo(scope.row)" v-if="!showDetail">删除</span>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<p class="error-text" v-show="isShowRemarkText">{{ errorText }}</p>
					<div class="page-contents">
						<PageSize :pages="pages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
					</div>
				</el-tab-pane>
			</el-tabs>
			<span class="close" @click="handleClose">x</span>
		</div>
		<VideoPreview :isShow="showPreviewVideo" :url="videoUrl" @close="closeVideoPrev" />
	</div>
</template>

<script>
import PageSize from '../../components/PageSize.vue';
import VideoPreview from '../../components/VideoPreview.vue';
import { mapActions, mapState } from 'vuex';
import { getStringLenth } from '../../../utils/tool.js';
import { appendToken } from '@/utils/tool';
export default {
	components: { PageSize, VideoPreview },
	props: {
		UploadDialogVisible: {
			required: true,
			type: Boolean,
			default: false
		},
		uploadConfig: {
			type: Object,
			required: true,
			default: () => {}
		},
		screenHeight: {
			type: Number,
			default: () => 1080,
			required: true
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		}
	},
	data() {
		return {
			activeName: 'broadcast',
			fileList: [], //本地视频
			isShowRemarkText: false,
			isShowTips: false,
			errorText: '仅支持上传.mp4格式的视频',
			tableData: [],
			form: {
				url: '',
				size: 0,
				fileName: '',
				originalname: '',
				fileList: []
			},
			videoUrl: '',
			showPreviewVideo: false,
			loading: false
		};
	},

	computed: {
		...mapState({
			speakVideoData: state => JSON.parse(JSON.stringify(state.uploadVideo.speakVideoData)),
			silentVideoData: state => JSON.parse(JSON.stringify(state.uploadVideo.silentVideoData)),
			pages: state => JSON.parse(JSON.stringify(state.uploadVideo.pages))
		})
	},
	mounted() {
		console.log(this.pages, this.speakVideoData, this.silentVideoData);
	},
	methods: {
		...mapActions('uploadVideo', ['setVideoBizflowId', 'setVideoPages', 'setSilentVideoData', 'setSpeakVideoData']),
		handleClose() {
			this.$emit('close');
		},
		changeBroadcastPageSize(val) {
			this.$emit('changeBroadcastPageSize', val);
		},
		changeBroadcastCurrentPage(val) {
			this.$emit('changeBroadcastCurrentPage', val);
		},
		// 播报视频预览
		broadcastPreviewVideo(row) {
			this.broadcastVideoData.tableConent.forEach(item => {
				if (item.id === row.id) {
					this.videoUrl = appendToken(item.url);
				}
			});
			this.showPreviewVideo = true;
		},
		// 静默视频预览
		silentPreviewVideo(row) {
			this.silentVideoData.tableConent.forEach(item => {
				if (item.id === row.id) {
					this.videoUrl = appendToken(item.url);
				}
			});
			this.showPreviewVideo = true;
		},
		closePreview() {
			this.showPreviewVideo = false;
		},
		handleClick(tab) {
			this.setVideoPages({ ...this.pages, page: 1, pageSize: 10 });
			this.$emit('update:tabName', tab.name);
		},
		uploadVideoClick() {
			this.$emit('uploadVideoClick');
		},
		remove(file) {
			if (file.status === 'success') {
				this.form.fileList.splice(this.form.fileList.indexOf(file.name), 1);
				console.log(this.form.fileList);
			}
		},
		beforeRemove() {},
		progress(event, file) {
			this.loading = true;
			if (event.percent === 100) {
				this.form.fileName = file.name;
				this.form.originalname = file.name;
				this.form.size = file.size;
			}
		},
		uploadSuccess(res) {
			if (res.code === 200) {
				this.$emit('uploadSuccess', { fileName: this.form.fileName, fileSize: this.form.size, url: res.data.url });
				this.loading = false;
			}
		},
		uploadError(error) {
			this.isShowRemarkText = true;
			console.log(error);
		},
		/** 更新数据，提交描述 */
		blurDescription(data) {
			this.$emit('blurDescription', data);
		},
		changePageSize(pageSize) {
			this.$emit('changePageSize', pageSize);
		},
		changeCurrentPage(page) {
			this.$emit('changeCurrentPage', page);
		},
		/** 更新描述 */
		updateValue(e, data) {
			data.description = e;
		},
		/** 删除视频 */
		delVideo(data) {
			this.$emit('delVideo', data);
		},

		/** 视频预览 */
		preview(data) {
			this.showPreviewVideo = true;
			this.videoUrl = appendToken(data.url);
		},
		closeVideoPrev() {
			this.videoUrl = '';
			this.showPreviewVideo = false;
		},
		// 仅支持上传 .mp4 格式的视频文件
		beforeUpload(file) {
			let name = file.name.substring(file.name.length - 3, file.name.length);
			let fileName = name.toLowerCase();
			if (fileName !== 'mp4') {
				this.errorText = '* 仅支持上传.mp4格式的视频';
				this.isShowRemarkText = true;
				return false;
			}
			if (file.size > videoMaxSize) {
				this.errorText = '* 视频大小超过最大上传限制';
				this.isShowRemarkText = true;
				return false;
			}
			this.isShowRemarkText = false;
		},
		isTip(content) {
			return getStringLenth(content) > 38;
		}
	}
};
</script>

<style lang="less" scoped>
.minScreen {
	transform: scale(0.7);
	top: 0 !important;
	left: 0 !important;
}
.upload-container {
	position: absolute;
	top: 100px;
	left: 100px;
	// zoom: 0.9; // zoom会造成弹出元素的位置偏离
	z-index: 0;
	width: 714px;
	// height: calc(100% - 600px);
	// overflow-y: auto;
	.page-contents {
		padding: 10px 0;
	}
	.btns {
		padding: 0 20px;
		display: flex;
		justify-content: space-around;
		color: #6384fe;
		span {
			cursor: pointer;
		}
	}
	.icon-question {
		display: inline-block;
		width: 14px;
		height: 14px;
		cursor: pointer;
		background: url(@/assets/img/aiworkflowimage/grayQuestion.png) no-repeat;
	}
	.clearfix {
		background-color: #fff;
		padding-bottom: 10px;
		.close {
			color: #c9c9ce;
			font-size: 24px;
			cursor: pointer;
			position: absolute;
			top: 0;
			right: 25px;
		}
		.title {
			font-size: 14px;
			font-weight: 700;
			color: #333333;
		}
		.broadcast-video {
			position: relative;
			padding: 10px;
		}
	}

	.upload-demo {
		margin-bottom: 12px;
		padding: 0 20px;
		.el-button {
			width: 58px;
			height: 28px;
			background: #ffffff;
			border: 1px solid #6384fe;
			border-radius: 16px;
			border-radius: 14px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #6384fe;
			line-height: 8px;
			padding: 0 10px;
		}
	}
	.edit-class {
		line-height: 30px;
		height: 30px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.el-upload {
		margin: 60px -70px 0 0px;
	}
}

.el-divider {
	width: 100%;
	margin-top: -20px;
}

.marginTop20 {
	margin-top: 20px;
	padding-left: 20px;
}
.btn-blue {
	color: #6384fe;
}
.error-text {
	color: #ef5753;
	margin-top: 10px;
}
.text-desc {
	color: #babbbc;
}
.edit-class {
	line-height: 30px;
	height: 30px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.imgQuestion {
	cursor: pointer;
	position: absolute;
	top: 15px;
	left: 66%;
	z-index: 100;
	img {
	}
	.tips {
		display: none;
	}
}
.imgQuestion:hover .tips {
	display: inline-block;
	position: absolute;
	background: #f6f6f6;
	min-width: 380px;
	border: 1px solid #ebeef5;
	padding: 10px;
	z-index: 2000;
	color: #333;
	line-height: 1.4;
	text-align: justify;
	font-size: 0.21875rem;
	-webkit-box-shadow: 0 0.03125rem 0.1875rem 0 rgb(0 0 0 / 10%);
	box-shadow: 0 0.03125rem 0.1875rem 0 rgb(0 0 0 / 10%);
	word-break: break-all;
}

.previewVideo-box {
	span {
		// background-color: #fff;
		color: #c9c9ce;
		font-size: 48px;
		cursor: pointer;
		position: absolute;
		top: 7%;
		left: 195%;
		z-index: 2000000;
	}
	video {
		// width: 404px;
		// height: 652px;
		z-index: 10000;
		position: absolute;
		top: 5%;
		left: 135%;
	}
}
</style>

<style lang="less">
.upload-container {
	.el-table thead {
		color: #676a6c;
		tr {
			th {
				background-color: #f8f8f9;
			}
		}
	}
	.el-tabs__header {
		margin: 0;
		padding: 10px;
	}

	// .el-table .cell {
	// 	height: 20px !important;
	// }
}
.el-tooltip__popper.is-dark {
	max-width: 400px;
}
.props-tips {
	background: #f6f6f6 !important;

	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	font-size: 12px;
	color: #333333 !important;
	white-space: normal;
	word-break: break-all;
}
.el-popover {
	max-width: 380px;
	background: #f6f6f6;
	// border: 1px solid #d3d3d3;
	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	font-size: 12px;
	color: #333333;
	white-space: normal;
	word-break: break-all;
}
.el-popper[x-placement^='left'] .popper__arrow::after {
	border-left-color: #f6f6f6;
}
.el-popper[x-placement^='right'] .popper__arrow::after {
	border-right-color: #f6f6f6;
}
.el-popper[x-placement^='bottom'] .popper__arrow::after {
	border-bottom-color: #f6f6f6;
}
.el-popper[x-placement^='top'] .popper__arrow::after {
	border-top-color: #f6f6f6;
}

.el-tooltip__popper[x-placement^='left'] .popper__arrow::after {
	border-left-color: #f6f6f6;
}
.el-tooltip__popper[x-placement^='right'] .popper__arrow::after {
	border-right-color: #f6f6f6;
}
.el-tooltip__popper[x-placement^='bottom'] .popper__arrow::after {
	border-bottom-color: #f6f6f6;
}
.el-tooltip__popper[x-placement^='top'] .popper__arrow::after {
	border-top-color: #f6f6f6;
}
//  .popper__arrow {
// 	border-color: #f6f6f6 !important;
// }
.upload-container {
	.el-loading-mask {
		background-color: rgba(255, 255, 255, 0.6) !important;
	}
}

.clearfix input {
	height: 30px;
	width: 100%;
	padding: 0;
	border: 1px solid #fff;
	text-align: center;
}

.clearfix .el-tabs__active-bar {
	background-color: #333 !important;
}
.clearfix .el-tabs__item {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #babbbc !important;
}
.clearfix .el-tabs__item.is-active {
	color: #333333 !important;
}
.clearfix .el-tabs__nav-scroll {
	padding-left: 20px;
}
</style>
